<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="theme" content="Chirpy v2.5.1">
		<meta name="generator" content="Jekyll v3.9.0" />
		<meta property="og:title" content="Getting Started" />
		<meta name="author" content="Cotes Chung" />
		<meta property="og:locale" content="en_US" />
		<meta name="description" content="Installation" />
		<meta property="og:description" content="Installation" />
		<link rel="canonical" href="https://jianxiaochong.github.io/posts/getting-started/"
		/>
		<meta property="og:url" content="https://jianxiaochong.github.io/posts/getting-started/"
		/>
		<meta property="og:site_name" content="jianxiaochong" />
		<meta property="og:type" content="article" />
		<meta property="article:published_time" content="2019-08-09T20:55:00+08:00"
		/>
		<meta name="twitter:card" content="summary" />
		<meta property="twitter:title" content="Getting Started" />
		<meta name="twitter:site" content="@jianxiaochong" />
		<meta name="twitter:creator" content="@Cotes Chung" />
		<meta name="google-site-verification" content="google_meta_tag_verification"
		/>
		<script type="application/ld+json">
			{
				"description": "Installation",
				"@type": "BlogPosting",
				"headline": "Getting Started",
				"dateModified": "2019-08-09T20:55:00+08:00",
				"datePublished": "2019-08-09T20:55:00+08:00",
				"mainEntityOfPage": {
					"@type": "WebPage",
					"@id": "https://jianxiaochong.github.io/posts/getting-started/"
				},
				"author": {
					"@type": "Person",
					"name": "Cotes Chung"
				},
				"url": "https://jianxiaochong.github.io/posts/getting-started/",
				"@context": "https://schema.org"
			}
		</script>
		<title>
			Getting Started | jianxiaochong
		</title>
		<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/assets/img/favicons/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon.png">
		<link rel="apple-touch-icon" href="/assets/img/favicons/apple-icon-precomposed.png">
		<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favicons/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favicons/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favicons/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favicons/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favicons/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favicons/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favicons/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favicons/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicons/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
		<link rel="manifest" href="/assets/img/favicons/manifest.json">
		<meta name='msapplication-config' content='/assets/img/favicons/browserconfig.xml'>
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/assets/img/favicons/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://fonts.gstatic.com">
		<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
		<link rel="dns-prefetch" href="https://www.google-analytics.com">
		<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
		<link rel="dns-prefetch" href="https://www.googletagmanager.com">
		<link rel="preconnect" href="cdn.jsdelivr.net">
		<link rel="dns-prefetch" href="cdn.jsdelivr.net">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
		integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css"
		integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous">
		<link rel="preload" as="style" href="/assets/css/post.css">
		<link rel="stylesheet" href="/assets/css/post.css">
		<link rel="preload" as="style" href="/assets/css/lib/bootstrap-toc.min.css">
		<link rel="stylesheet" href="/assets/css/lib/bootstrap-toc.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js">
		</script>
		<script async src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js">
		</script>
		<script async src="/assets/js/post.min.js">
		</script>
		<script defer src="/app.js">
		</script>
		<body data-spy="scroll" data-target="#toc">
			<div id="sidebar" class="d-flex flex-column">
				<div id="nav-wrapper">
					<div id="profile-wrapper" class="d-flex flex-column">
						<div id="avatar" class="d-flex justify-content-center">
							<a href="/" alt="avatar">
								<img src="/assets/img/sample/avatar.jpg" alt="avatar" onerror="this.style.display='none'">
							</a>
						</div>
						<div class="profile-text mt-3">
							<div class="site-title">
								<a href="/">
									jianxiaochong
								</a>
							</div>
							<div class="site-subtitle font-italic">
								简小虫 丨个人博客
							</div>
						</div>
					</div>
					<ul class="nav flex-column">
						<li class="nav-item d-flex justify-content-center ">
							<a href="/" class="nav-link d-flex justify-content-center align-items-center w-100">
								<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded">
								</i>
								<span>
									HOME
								</span>
							</a>
							<li class="nav-item d-flex justify-content-center ">
								<a href="/tabs/categories/" class="nav-link d-flex justify-content-center align-items-center w-100">
									<i class="fa-fw fas fa-stream ml-xl-3 mr-xl-3 unloaded">
									</i>
									<span>
										CATEGORIES
									</span>
								</a>
								<li class="nav-item d-flex justify-content-center ">
									<a href="/tabs/tags/" class="nav-link d-flex justify-content-center align-items-center w-100">
										<i class="fa-fw fas fa-tags ml-xl-3 mr-xl-3 unloaded">
										</i>
										<span>
											TAGS
										</span>
									</a>
									<li class="nav-item d-flex justify-content-center ">
										<a href="/tabs/archives/" class="nav-link d-flex justify-content-center align-items-center w-100">
											<i class="fa-fw fas fa-archive ml-xl-3 mr-xl-3 unloaded">
											</i>
											<span>
												ARCHIVES
											</span>
										</a>
										<li class="nav-item d-flex justify-content-center ">
											<a href="/tabs/about/" class="nav-link d-flex justify-content-center align-items-center w-100">
												<i class="fa-fw fas fa-info ml-xl-3 mr-xl-3 unloaded">
												</i>
												<span>
													ABOUT
												</span>
											</a>
					</ul>
				</div>
				<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
					<span id="mode-toggle-wrapper">
						<i class="mode-toggle fas fa-sun" dark-mode-invisible>
						</i>
						<i class="mode-toggle fas fa-moon" light-mode-invisible>
						</i>
						<script type="text/javascript">
							class ModeToggle {
								static get MODE_KEY() {
									return "mode";
								}
								static get DARK_MODE() {
									return "dark";
								}
								static get LIGHT_MODE() {
									return "light";
								}
								constructor() {
									if (this.mode != null) {
										if (this.mode == ModeToggle.DARK_MODE) {
											if (!this.isSysDarkPrefer) {
												this.setDark();
											}
										} else {
											if (this.isSysDarkPrefer) {
												this.setLight();
											}
										}
									}
									var self = this;
									/* always follow the system prefers */
									this.sysDarkPrefers.addListener(function() {
										if (self.mode != null) {
											if (self.mode == ModeToggle.DARK_MODE) {
												if (!self.isSysDarkPrefer) {
													self.setDark();
												}
											} else {
												if (self.isSysDarkPrefer) {
													self.setLight();
												}
											}
											self.clearMode();
										}
									});
								}
								/* constructor() */
								setDark() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
								}
								setLight() {
									$('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
									sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
								}
								clearMode() {
									$('html').removeAttr(ModeToggle.MODE_KEY);
									sessionStorage.removeItem(ModeToggle.MODE_KEY);
								}
								get sysDarkPrefers() {
									return window.matchMedia("(prefers-color-scheme: dark)");
								}
								get isSysDarkPrefer() {
									return this.sysDarkPrefers.matches;
								}
								get isDarkMode() {
									return this.mode == ModeToggle.DARK_MODE;
								}
								get isLightMode() {
									return this.mode == ModeToggle.LIGHT_MODE;
								}
								get hasMode() {
									return this.mode != null;
								}
								get mode() {
									return sessionStorage.getItem(ModeToggle.MODE_KEY);
								}
								flipMode() {
									if (this.hasMode) {
										if (this.isSysDarkPrefer) {
											if (this.isLightMode) {
												this.clearMode();
											} else {
												this.setLight();
											}
										} else {
											if (this.isDarkMode) {
												this.clearMode();
											} else {
												this.setDark();
											}
										}
									} else {
										if (this.isSysDarkPrefer) {
											this.setLight();
										} else {
											this.setDark();
										}
									}
								}
								/* flipMode() */
							}
							/* ModeToggle */
							let toggle = new ModeToggle();
							$(".mode-toggle").click(function() {
								toggle.flipMode();
							});
						</script>
					</span>
					<span class="icon-border">
					</span>
					<a href="https://github.com/jianxiaochong" aria-label="github" target="_blank"
					rel="noopener">
						<i class="fab fa-github-alt">
						</i>
					</a>
					<a href="https://twitter.com/jianxiaochong" aria-label="twitter" target="_blank"
					rel="noopener">
						<i class="fab fa-twitter">
						</i>
					</a>
					<a href=" javascript:location.href = 'mailto:' + ['814105368','qq.com'].join('@')"
					aria-label="email">
						<i class="fas fa-envelope">
						</i>
					</a>
					<a href="/feed.xml" aria-label="rss">
						<i class="fas fa-rss">
						</i>
					</a>
				</div>
			</div>
			<div id="topbar-wrapper" class="row justify-content-center topbar-down">
				<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
					<span id="breadcrumb">
						<span>
							<a href="/">
								Posts
							</a>
						</span>
						<span>
							Getting Started
						</span>
					</span>
					<i id="sidebar-trigger" class="fas fa-bars fa-fw">
					</i>
					<div id="topbar-title">
						Post
					</div>
					<i id="search-trigger" class="fas fa-search fa-fw">
					</i>
					<span id="search-wrapper" class="align-items-center">
						<i class="fas fa-search fa-fw">
						</i>
						<input class="form-control" id="search-input" type="search" aria-label="search"
						placeholder="Search...">
						<i class="fa fa-times-circle fa-fw" id="search-cleaner">
						</i>
					</span>
					<span id="search-cancel">
						Cancel
					</span>
				</div>
			</div>
			<div id="main-wrapper">
				<div id="main">
					<div class="row">
						<div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
							<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
								<h1 data-toc-skip>
									Getting Started
								</h1>
								<div class="post-meta text-muted d-flex flex-column">
									<div>
										Posted
										<span class="timeago " data-toggle="tooltip" data-placement="bottom" title="Fri, Aug 9, 2019, 8:55 PM +0800">
											Aug 9, 2019
											<i class="unloaded">
												2019-08-09T20:55:00+08:00
											</i>
										</span>
										by
										<span class="author">
											Cotes Chung
										</span>
									</div>
								</div>
								<div class="post-content">
									<h2 id="installation">
										Installation
									</h2>
									<p>
										<a href="https://github.com/cotes2020/jekyll-theme-chirpy/fork">
											Fork
											<strong>
												Chirpy
											</strong>
										</a>
										on GitHub, rename the repository to
										<code class="language-plaintext highlighter-rouge">
											USERNAME.github.io
										</code>
										(where
										<code class="language-plaintext highlighter-rouge">
											USERNAME
										</code>
										is your GitHub username), and then open terminal and clone the fork to
										local by:
									</p>
									<div class="language-terminal highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		git clone https://github.com/USERNAME/USERNAME.github.io.git
																		<span class="nt">
																			-b
																		</span>
																		master
																		<span class="nt">
																			--single-branch
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h3 id="setting-up-the-local-envrionment">
										Setting up the local envrionment
									</h3>
									<p>
										If you would like to run or build the project on your local machine, please
										follow the
										<a href="https://jekyllrb.com/docs/installation/">
											Jekyll Docs
										</a>
										to complete the installation of
										<code class="language-plaintext highlighter-rouge">
											Ruby
										</code>
										,
										<code class="language-plaintext highlighter-rouge">
											RubyGems
										</code>
										and
										<code class="language-plaintext highlighter-rouge">
											Bundler
										</code>
										.
									</p>
									<p>
										Before running or building for the first time, please complete the installation
										of the Jekyll plugins. Go to the root directory of project and run:
									</p>
									<div class="language-terminal highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		bundle
																		<span class="nb">
																			install
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										<code class="language-plaintext highlighter-rouge">
											bundle
										</code>
										will automatically install all the dependencies specified by
										<code class="language-plaintext highlighter-rouge">
											Gemfile
										</code>
										.
									</p>
									<p>
										In order to generate some extra files (
										<em>
											categories
										</em>
										,
										<em>
											tags
										</em>
										and
										<em>
											last modified list
										</em>
										), we need to use some tool scripts. And they require dependency package
										<a href="https://github.com/mikefarah/yq#install">
											yq
										</a>
										to be installed. What’s more, if your machine is running Debian or macOS,
										you also need to install
										<a href="https://www.gnu.org/software/coreutils/">
											GNU coreutils
										</a>
										.
									</p>
									<ul>
										<li>
											<p>
												on Debian:
											</p>
											<div class="language-console highlighter-rouge">
												<div class="highlight">
													<code>
														<table class="rouge-table">
															<tbody>
																<tr>
																	<td class="rouge-gutter gl">
																		<pre class="lineno">
																			1
																		</pre>
																		<td class="rouge-code">
																			<pre>
																				<span class="gp">
																					$
																				</span>
																				<span class="w">
																				</span>
																				<span class="nb">
																					sudo
																				</span>
																				apt-get
																				<span class="nb">
																					install
																				</span>
																				coreutils
																			</pre>
														</table>
													</code>
												</div>
											</div>
											<li>
												<p>
													on macOS:
												</p>
												<div class="language-console highlighter-rouge">
													<div class="highlight">
														<code>
															<table class="rouge-table">
																<tbody>
																	<tr>
																		<td class="rouge-gutter gl">
																			<pre class="lineno">
																				1
																			</pre>
																			<td class="rouge-code">
																				<pre>
																					<span class="gp">
																						$
																					</span>
																					<span class="w">
																					</span>
																					brew
																					<span class="nb">
																						install
																					</span>
																					coreutils
																				</pre>
															</table>
														</code>
													</div>
												</div>
									</ul>
									<h3 id="setting-up-docker-environment-optional">
										Setting up Docker environment (optional)
									</h3>
									<p>
										If you’re a loyal fan of
										<a href="https://www.docker.com/">
											<strong>
												Docker
											</strong>
										</a>
										or just too lazy to install the packages mentioned in
										<a href="#setting-up-the-local-envrionment">
											<em>
												Setting up the local envrionment
											</em>
										</a>
										, please make sure you have
										<strong>
											Docker Engine
										</strong>
										installed and running, and then get Docker image
										<code class="language-plaintext highlighter-rouge">
											jekyll/jekyll
										</code>
										from Docker Hub by the following command:
									</p>
									<div class="language-console highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		docker pull jekyll/jekyll:latest
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<h2 id="usage">
										Usage
									</h2>
									<p>
										Running
										<a href="https://github.com/cotes2020/jekyll-theme-chirpy/">
											<strong>
												Chirpy
											</strong>
										</a>
										requires some extra files, which cannot be generated by Jekyll native
										commands, so please strictly follow the methods mentioned below to run
										or deploy your website.
									</p>
									<h3 id="initialization">
										Initialization
									</h3>
									<p>
										Go to the root directory of the project and start initialization:
									</p>
									<div class="language-console highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		bash tools/init.sh
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<blockquote>
										<p>
											<strong>
												Note
											</strong>
											: If you not intend to deploy it on GitHub Pages, append parameter option
											<code class="language-plaintext highlighter-rouge">
												--no-gh
											</code>
											at the end of the above command.
										</p>
									</blockquote>
									<p>
										What it does is:
									</p>
									<ol>
										<li>
											<p>
												Remove some files or directories from your repository:
											</p>
											<ul>
												<li>
													<code class="language-plaintext highlighter-rouge">
														.travis.yml
													</code>
													<li>
														files under
														<code class="language-plaintext highlighter-rouge">
															_posts
														</code>
														<li>
															folder
															<code class="language-plaintext highlighter-rouge">
																docs
															</code>
											</ul>
											<li>
												<p>
													If you use the
													<code class="language-plaintext highlighter-rouge">
														--no-gh
													</code>
													option, the directory
													<code class="language-plaintext highlighter-rouge">
														.github
													</code>
													will be deleted. Otherwise, setup the GitHub Action workflow by removing
													extension
													<code class="language-plaintext highlighter-rouge">
														.hook
													</code>
													of
													<code class="language-plaintext highlighter-rouge">
														.github/workflows/pages-deploy.yml.hook
													</code>
													, and then remove the other files and directories in folder
													<code class="language-plaintext highlighter-rouge">
														.github
													</code>
													.
												</p>
												<li>
													<p>
														Automatically create a commit to save the changes.
													</p>
									</ol>
									<h3 id="configuration">
										Configuration
									</h3>
									<p>
										Generally, go to
										<code class="language-plaintext highlighter-rouge">
											_config.yml
										</code>
										and configure the variables as needed. Some of them are typical options:
									</p>
									<ul>
										<li>
											<code class="language-plaintext highlighter-rouge">
												url
											</code>
											<li>
												<code class="language-plaintext highlighter-rouge">
													avatar
												</code>
												<li>
													<code class="language-plaintext highlighter-rouge">
														timezone
													</code>
													<li>
														<code class="language-plaintext highlighter-rouge">
															theme_mode
														</code>
									</ul>
									<h3 id="run-locally">
										Run Locally
									</h3>
									<p>
										You may want to preview the site contents before publishing, so just run
										it by:
									</p>
									<div class="language-terminal highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		bash tools/run.sh
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										Then open a browser and visit to
										<a href="http://localhost:4000">
											http://localhost:4000
										</a>
										.
									</p>
									<p>
										Few days later, you may find that the file changes does not refresh in
										real time by using
										<code class="language-plaintext highlighter-rouge">
											run.sh
										</code>
										. Don’t worry, the advanced option
										<code class="language-plaintext highlighter-rouge">
											-r
										</code>
										(or
										<code class="language-plaintext highlighter-rouge">
											--realtime
										</code>
										) will solve this problem, but it requires
										<a href="http://emcrisostomo.github.io/fswatch/">
											<strong>
												fswatch
											</strong>
										</a>
										to be installed on your machine.
									</p>
									<h3 id="run-on-docker">
										Run on Docker
									</h3>
									<p>
										Run the site on Docker with the following command:
									</p>
									<div class="language-terminal highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		docker run
																		<span class="nt">
																			--rm
																		</span>
																		<span class="nt">
																			-it
																		</span>
																		<span class="se">
																			\
																		</span>
																		<span class="nt">
																			--volume
																		</span>
																		<span class="o">
																			=
																		</span>
																		<span class="s2">
																			"
																		</span>
																		<span class="nv">
																			$PWD
																		</span>
																		<span class="s2">
																			:/srv/jekyll"
																		</span>
																		<span class="se">
																			\
																		</span>
																		<span class="nt">
																			-p
																		</span>
																		4000:4000 jekyll/jekyll
																		<span class="se">
																			\
																		</span>
																		bash tools/run.sh
																		<span class="nt">
																			--docker
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										Please note that on Docker containers, you’ll lose the real-time refresh
										feature.
									</p>
									<h3 id="deployment">
										Deployment
									</h3>
									<p>
										Before the deployment begins, checkout the file
										<code class="language-plaintext highlighter-rouge">
											_config.yml
										</code>
										and make sure the
										<code class="language-plaintext highlighter-rouge">
											url
										</code>
										is configured correctly. Furthermore, if you prefer the
										<a href="https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites">
											<em>
												project site
											</em>
										</a>
										and don’t use a custom domain, or you want to visit your website with
										a base url on a web server other than
										<strong>
											GitHub Pages
										</strong>
										, remember to change the
										<code class="language-plaintext highlighter-rouge">
											baseurl
										</code>
										to your project name that starting with a slash. For example,
										<code class="language-plaintext highlighter-rouge">
											/project
										</code>
										.
									</p>
									<p>
										Assuming you have already gone through the
										<a href="#initialization">
											initialization
										</a>
										, you can now choose ONE of the following methods to deploy your website.
									</p>
									<h4 id="deploy-on-github-pages">
										Deploy on GitHub Pages
									</h4>
									<p>
										For security reasons, GitHub Pages build runs on
										<code class="language-plaintext highlighter-rouge">
											safe
										</code>
										mode, which restricts us from using tool scripts to generate additional
										page files. Therefore, we can use
										<strong>
											GitHub Actions
										</strong>
										to build the site, store the built site files on a new branch, and use
										that branch as the source of the Pages service.
									</p>
									<ol>
										<li>
											<p>
												Push any commit to
												<code class="language-plaintext highlighter-rouge">
													origin/master
												</code>
												to trigger the GitHub Actions workflow. Once the build is complete and
												successful, a new remote branch named
												<code class="language-plaintext highlighter-rouge">
													gh-pages
												</code>
												will appear to store the built site files.
											</p>
											<li>
												<p>
													Browse to your repository on GitHub and choose the branch
													<code class="language-plaintext highlighter-rouge">
														gh-pages
													</code>
													as the
													<a href="https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site">
														publishing source
													</a>
													throught
													<em>
														Settings
													</em>
													→
													<em>
														Options
													</em>
													→
													<em>
														GitHub Pages
													</em>
													:
													<img src=" "
													data-src="/assets/img/sample/gh-pages-sources.png" alt="gh-pages-sources"
													width="650" class="normal" />
												</p>
												<li>
													<p>
														Visit your website at the address indicated by GitHub.
													</p>
									</ol>
									<h4 id="deploy-on-other-platforms">
										Deploy on Other Platforms
									</h4>
									<p>
										On platforms other than GitHub, we cannot enjoy the convenience of
										<strong>
											GitHub Actions
										</strong>
										. Therefore, we should build the site locally (or on some other 3rd-party
										CI platform) and then put the site files on the server.
									</p>
									<p>
										Go to the root of the source project, build your site by:
									</p>
									<div class="language-console highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		bash tools/build.sh
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<blockquote>
										<p>
											<strong>
												Note
											</strong>
											: The output path can be specified with the option
											<code class="language-plaintext highlighter-rouge">
												-d
											</code>
											.
										</p>
									</blockquote>
									<p>
										Or, build the site with Docker by:
									</p>
									<div class="language-terminal highlighter-rouge">
										<div class="highlight">
											<code>
												<table class="rouge-table">
													<tbody>
														<tr>
															<td class="rouge-gutter gl">
																<pre class="lineno">
																	1 2 3 4
																</pre>
																<td class="rouge-code">
																	<pre>
																		<span class="gp">
																			$
																		</span>
																		<span class="w">
																		</span>
																		docker run
																		<span class="nt">
																			--rm
																		</span>
																		<span class="nt">
																			-it
																		</span>
																		<span class="se">
																			\
																		</span>
																		<span class="nt">
																			--volume
																		</span>
																		<span class="o">
																			=
																		</span>
																		<span class="s2">
																			"
																		</span>
																		<span class="nv">
																			$PWD
																		</span>
																		<span class="s2">
																			:/srv/jekyll"
																		</span>
																		<span class="se">
																			\
																		</span>
																		jekyll/jekyll
																		<span class="se">
																			\
																		</span>
																		bash tools/build.sh
																		<span class="nt">
																			--docker
																		</span>
																	</pre>
												</table>
											</code>
										</div>
									</div>
									<p>
										Unless you specified the output path, the generated site files will be
										placed in folder
										<code class="language-plaintext highlighter-rouge">
											_site
										</code>
										of the project’s root directory. Now you should upload those files to
										your web server.
									</p>
								</div>
								<div class="post-tail-wrapper text-muted">
									<div class="post-meta mb-3">
										<i class="far fa-folder-open fa-fw mr-1">
										</i>
										<a href='/categories/blogging/'>
											Blogging
										</a>
										,
										<a href='/categories/tutorial/'>
											Tutorial
										</a>
									</div>
									<div class="post-tags">
										<i class="fa fa-tags fa-fw mr-1">
										</i>
										<a href="/tags/getting-started/" class="post-tag no-text-decoration">
											getting started
										</a>
									</div>
									<div class="post-tail-bottom d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
										<div class="license-wrapper">
											This post is licensed under
											<a href="https://creativecommons.org/licenses/by/4.0/">
												CC BY 4.0
											</a>
											by the author.
										</div>
										<div class="share-wrapper">
											<span class="share-label text-muted mr-1">
												Share
											</span>
											<span class="share-icons">
												<a href="https://twitter.com/intent/tweet?text=Getting Started - jianxiaochong&url=https://jianxiaochong.github.io/posts/getting-started/"
												data-toggle="tooltip" data-placement="top" title="Twitter" target="_blank"
												rel="noopener" aria-label="Twitter">
													<i class="fa-fw fab fa-twitter">
													</i>
												</a>
												<a href="https://www.facebook.com/sharer/sharer.php?title=Getting Started - jianxiaochong&u=https://jianxiaochong.github.io/posts/getting-started/"
												data-toggle="tooltip" data-placement="top" title="Facebook" target="_blank"
												rel="noopener" aria-label="Facebook">
													<i class="fa-fw fab fa-facebook-square">
													</i>
												</a>
												<a href="https://telegram.me/share?text=Getting Started - jianxiaochong&url=https://jianxiaochong.github.io/posts/getting-started/"
												data-toggle="tooltip" data-placement="top" title="Telegram" target="_blank"
												rel="noopener" aria-label="Telegram">
													<i class="fa-fw fab fa-telegram">
													</i>
												</a>
												<i class="fa-fw fas fa-link small" onclick="copyLink()" data-toggle="tooltip"
												data-placement="top" title="Copy link">
												</i>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
							<div class="access">
								<div id="access-tags">
									<span>
										Trending Tags
									</span>
									<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
										<a class="post-tag" href="/tags/favicon/">
											favicon
										</a>
										<a class="post-tag" href="/tags/getting-started/">
											getting started
										</a>
										<a class="post-tag" href="/tags/typography/">
											typography
										</a>
										<a class="post-tag" href="/tags/writing/">
											writing
										</a>
									</div>
								</div>
							</div>
							<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
								<span class="pl-3 pt-2 mb-2">
									Contents
								</span>
								<nav id="toc" data-toggle="toc">
								</nav>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12 col-lg-11 col-xl-8">
							<div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
								<div id="related-posts" class="mt-5 mb-2 mb-sm-4">
									<h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>
										Further Reading
									</h3>
									<div class="card-deck mb-4">
										<div class="card">
											<a href="/posts/customize-the-favicon/">
												<div class="card-body">
													<span class="timeago small">
														Aug 11, 2019
														<i class="unloaded">
															2019-08-11T00:34:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Customize the Favicon
													</h3>
													<div class="text-muted small">
														<p>
															In Chirpy, the image files of Favicons are placed in assets/img/favicons/.
															You may need to replace them with your own. So let’s see how to customize
															these Favicons. With a square image (PNG, JPG o...
														</p>
													</div>
												</div>
											</a>
										</div>
										<div class="card">
											<a href="/posts/write-a-new-post/">
												<div class="card-body">
													<span class="timeago small">
														Aug 8
														<i class="unloaded">
															2020-08-08T14:10:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														撰写新文章
													</h3>
													<div class="text-muted small">
														<p>
															命名和路径 创建一个名为YYYY-MM-DD的新文件-标题.扩展名并将其放在根目录的“_post/”中。请注意，“EXTENSION”必须是“md”和“markdown”之一。从“v2.4.1”开始，您可以在“_post/”下创建子目录来对文章进行分类。
															前题 基本上，你需要填充，如下图所示：正面内容 1 2 3 4 5 6 --- title: TITLE #标题 date: YY...
														</p>
													</div>
												</div>
											</a>
										</div>
										<div class="card">
											<a href="/posts/text-and-typography/">
												<div class="card-body">
													<span class="timeago small">
														Aug 8
														<i class="unloaded">
															2020-08-08T11:33:00+08:00
														</i>
													</span>
													<h3 class="pt-0 mt-1 mb-3" data-toc-skip>
														Markdown文本和排版
													</h3>
													<div class="text-muted small">
														<p>
															这个Jekyll模板完全兼容Markdown语法。现在，让我们看看文本和排版。 标题 H1 H2 H3 H4 段落 我似浮云独自游 悠然溪谷群山中，
															霎时美景入bai眼帘， 金色水仙朵朵开， 遍布湖畔树bai荫下， 摇曳风中舞翩翩， 璀璨漫漫如繁星。 列表 ###有序列表 1.第一项 2.第二项
															3.第三项 无序列表 item 1 ...
														</p>
													</div>
												</div>
											</a>
										</div>
									</div>
								</div>
								<div class="post-navigation d-flex justify-content-between">
									<span class="btn btn-outline-primary disabled">
										<p>
											-
										</p>
									</span>
									<a href="/posts/customize-the-favicon/" class="btn btn-outline-primary">
										<p>
											Customize the Favicon
										</p>
									</a>
								</div>
							</div>
						</div>
					</div>
					<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js">
					</script>
					<script type="text/javascript">
						const imgs = document.querySelectorAll('#post-wrapper img');
						const observer = lozad(imgs);
						observer.observe();
					</script>
					<footer class="d-flex w-100 justify-content-center">
						<div class="d-flex justify-content-between align-items-center">
							<div class="footer-left">
								<p class="mb-0">
									© 2020
									<a href="https://twitter.com/jianxiaochong">
										jianxiaochong
									</a>
									.
									<span data-toggle="tooltip" data-placement="top" title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.">
										Some rights reserved.
									</span>
								</p>
							</div>
							<div class="footer-right">
								<p class="mb-0">
									Powered by
									<a href="https://jekyllrb.com" target="_blank" rel="noopener">
										Jekyll
									</a>
									with
									<a href="https://github.com/cotes2020/jekyll-theme-chirpy/" target="_blank"
									rel="noopener">
										Chirpy
									</a>
									theme.
								</p>
							</div>
						</div>
					</footer>
				</div>
				<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
					<div class="col-12 col-xl-11 post-content">
						<div id="search-hints">
							<h4 class="text-muted mb-4">
								Trending Tags
							</h4>
							<a class="post-tag" href="/tags/favicon/">
								favicon
							</a>
							<a class="post-tag" href="/tags/getting-started/">
								getting started
							</a>
							<a class="post-tag" href="/tags/typography/">
								typography
							</a>
							<a class="post-tag" href="/tags/writing/">
								writing
							</a>
						</div>
						<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3">
						</div>
					</div>
				</div>
			</div>
			<div id="mask">
			</div>
			<a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow"
			role="button">
				<i class="fas fa-angle-up">
				</i>
			</a>
			<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js">
			</script>
			<script>
				SimpleJekyllSearch({
					searchInput: document.getElementById('search-input'),
					resultsContainer: document.getElementById('search-results'),
					json: '/assets/js/data/search.json',
					searchResultTemplate: '<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0"> <a href="https://jianxiaochong.github.io{url}">{title}</a><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"><div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div><div><i class="fa fa-tag fa-fw"></i>{tags}</div></div><p>{snippet}</p></div>',
					noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
				});
			</script>
			<script async src="https://www.googletagmanager.com/gtag/js?id=">
			</script>
			<script>
				window.dataLayer = window.dataLayer || [];
				function gtag() {
					dataLayer.push(arguments);
				}
				gtag('js', new Date());
				gtag('config', '');
			</script>